<template>
  <div id="myScroll" ref="myScrollRef">
    <div class="content" ref="containerRef">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import PerfectScrollbar from 'perfect-scrollbar'

export default {
  name: 'MyScrollbar',
  data () {
    return {
      myScroll: null
    }
  },
  mounted () {
    this._initScrollbar()
  },
  methods: {
    // 1. 初始化
    _initScrollbar () {
      // 1. 创建实例
      this.$nextTick(() => {
        this.myScroll = new PerfectScrollbar(this.$refs.myScrollRef, {
          wheelSpeed: 1,
          wheelPropagation: true,
          swipeEasing: false
          // minScrollbarLength: 20
        })
        // 绑定滚动事件
        this.$refs.myScrollRef.addEventListener('ps-y-reach-end', () => {
          this.$bus.$emit('yEnd', 1)
        })
      })
    },
    // 2. 滚动至
    scrollTo (top = 0) {
      this.$refs.myScrollRef.scrollTop = top
      // 传给事件总线
    },
    // 3. 刷新
    update () {
      // console.log('update了')
      this.myScroll.update()
    }
  }
}
</script>

<style scoped lang="less">
#myScroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content {
    height: 100%;
  }
}
</style>

<style lang="less">
#myScroll {
  > .ps__rail-y {
    width: 10px;
    position: absolute;
    right: 0;
    left: calc(100%);
    transform: translateX(-100%);
    > .ps__thumb-y {
      position: absolute;
      z-index: 99;
      width: 10px;
      background-color: #e1e1e2;
      border-radius: 10px;
      &:hover {
        background-color: #cfcfd1;
      }
    }
  }
}
</style>
